<template>
  <div class="device-status"> 
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true"  label-width="100px">
      <el-form-item :label="$t('common.startDate')" prop="startTime">
        <el-date-picker
          v-model="queryParams.startTime"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime"
          :placeholder="$t('common.startDatePlaceholder')">
        </el-date-picker>
      </el-form-item>
      <el-form-item :label="$t('common.endDate')" prop="endTime">
        <el-date-picker
          v-model="queryParams.endTime"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime"
          :placeholder="$t('common.endDatePlaceholder')">
        </el-date-picker>
      </el-form-item>
      <el-form-item :label="$t('deviceDetail.status.status')" prop="status">
        <el-select v-model="queryParams.status" :placeholder="$t('deviceDetail.status.status')" clearable>
          <el-option v-for="dict in dict.type.online_status" :key="dict.dictCode" :value="dict.value" :label="dict.label"></el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="设备码" prop="code">
        <el-input v-model="queryParams.code"></el-input>
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{$t('common.search')}}</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="tableData"  style="margin-top:30px">
      <el-table-column :label="$t('deviceDetail.status.deviceName')" align="left" prop="deviceName" />
      <el-table-column :label="$t('deviceDetail.status.deviceCode')" align="left" prop="deviceCode" />
      <el-table-column :label="$t('deviceDetail.status.dateTime')" align="center" prop="createTime" width="150" />
      <el-table-column :label="$t('deviceDetail.status.status')" align="center" prop="status"   width="150" >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.online_status" :value="scope.row.status"/>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { deviceStatuList } from "@/api/device/device";
  export default {
    props:{
      deviceId:'',
    },
    dicts: ['online_status'],
    data(){
      return{
        total:0,
        queryParams:{
          status:'',
          deviceId:this.deviceId,
          startTime:'',
          endTime:'',
          pageNum:1,
          pageSize:20
        },
        loading:false,
        tableData:[],

      }
    },
    created(){
      this.getList()
    },
    methods:{
      handleQuery(){
        this.queryParams.pageNum = 1;
        this.getList();
      },
      getList() {
        this.loading = true;
        console.log(this.queryParams)
        deviceStatuList(this.queryParams).then(res => {
          this.tableData = res.rows;
          this.total = res.total;
          this.loading = false;
        });
      },
    }
  }

</script> 

<style lang="scss" scoped > 
.device-status{
  padding: 15px;
}
</style>